import React, {FC} from 'react';
import './index.css';
import {Button, Divider, message, Modal, Space, Tag} from 'antd';
import {
	CopyOutlined,
	DeleteOutlined,
	EditOutlined,
	ExclamationCircleFilled,
	LineChartOutlined,
	StarOutlined
} from '@ant-design/icons';
import {Link, useNavigate} from 'react-router-dom';

type PropsType = {
	// id
	_id: string;
	// 标题
	title: string;
	// 是否发布： 已发布/未发布
	isPublished: boolean;
	// 是否标星
	isStar: boolean;
	// 答卷数量
	answerCount: number;
	// 创建时间
	createdAt: string;
}

/**
 * 问卷卡片
 */
const QuestionCard: FC<PropsType> = (props: PropsType) => {
	const {title, isPublished, answerCount, createdAt, isStar, _id} = props;
	const navigate = useNavigate();
	const {confirm} = Modal;

	/**
	 * 是否复制问卷
	 */
	const isCopyQuestion = () => {
		confirm({
			title: '确定复制该问卷？',
			icon: <ExclamationCircleFilled/>,
			onOk: copyQuestion,
		});
	};

	/**
	 * 复制问卷
	 */
	const copyQuestion = () => {
		message.success('复制问卷成功！').then();
	};

	/**
	 * 是否删除问卷
	 */
	const isDeleteQuestion = () => {
		confirm({
			title: '确定删除该问卷？',
			icon: <ExclamationCircleFilled/>,
			onOk: deleteQuestion,
		});
	};

	/**
	 * 删除问卷
	 */
	const deleteQuestion = () => {
		message.success('删除问卷成功！').then();
	};

	return (
		<div className="question-card">
			{/* 头部 */}
			<div className="question-card-header">
				{/* 头部左侧 */}
				<div className="question-card-header-left">
					<Link to={isPublished ? `/question/stat/${_id}`:`/question/edit/${_id}`}>
						<Space>
							{isStar && <StarOutlined style={{color: 'red'}}/>}
							{title}
						</Space>
					</Link>
				</div>

				{/* 头部右侧 */}
				<div className="question-card-header-right">
					<Space>
						{isPublished ? <Tag color="processing">已发布</Tag>:<Tag>未发布</Tag>}
						<span>答卷人数：{answerCount}</span>
						<span>{createdAt}</span>
					</Space>
				</div>
			</div>

			<Divider style={{margin: '12px 0'}}/>

			{/* 身体 */}
			<div className="question-card-content">
				{/* 身体左侧 */}
				<div className="question-card-content-left">
					<Space>
						<Button
							type="text"
							size="small"
							icon={<EditOutlined/>}
							onClick={() => navigate(`/question/edit/${_id}`)}
						>
							编辑问卷
						</Button>
						<Button
							type="text"
							size="small"
							icon={<LineChartOutlined/>}
							onClick={() => navigate(`/question/stat/${_id}`)}
							disabled={!isPublished}
						>
							数据统计
						</Button>
					</Space>
				</div>

				{/* 身体右侧 */}
				<div className="question-card-content-right">
					<Space>
						<Button
							type="text"
							size="small"
							icon={<StarOutlined/>}
						>
							{isStar ? '取消标星':'标星'}
						</Button>
						<Button
							type="text"
							size="small"
							icon={<CopyOutlined/>}
							onClick={isCopyQuestion}
						>
							复制
						</Button>
						<Button
							type="text"
							size="small"
							icon={<DeleteOutlined/>}
							onClick={isDeleteQuestion}
						>
							删除
						</Button>
					</Space>
				</div>
			</div>
		</div>
	);
};

export default QuestionCard;